<template id="search_address">
  <div class="search_address">

    <!--头部-->
    <div class="about_header">

      <div class="about_title">
        <!-- <router-link ><img src="../../assets/images/class/jiantou_03.png" /></router-link> -->
        <img style="width: 9px;" @click="haha()" src="../../assets/images/class/jiantou_03.png" alt="">
        <p>选择地址</p>
        <div class="about_select">
          <div class="about_ing"></div>
        </div>

      </div>
    </div>
    <!--头部结束-->
    <!--请输入大厦或小区名称-->
    <div class="search_village">
      <input type="text" id="suggestId" name="address_detail" v-model="address_detail" class="input_style" placeholder="请输入大厦或小区名称" />
      <button @click.stop="haha(address_detail)">确认</button>
    </div>
    <div id="allmap">

    </div>
    <!--请输入大厦或小区名称结束-->

  </div>
</template>

<script>
  export default {
    data() {
      return {
        address_detail: '', //详细地址
        userlocation: {
          lng: "",
          lat: ""
        },
      }
    },
    mounted() {
      let th = this
      this.$nextTick(function() {
        // 创建Map实例
        var map = new BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new BMap.Point(116.4, 39.9); // 创建点坐标，获得公司的经纬度坐标
        var gc = new BMap.Geocoder();
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();
        var ac = new BMap.Autocomplete( //建立一个自动完成的对象
          {
            "input": "suggestId",
            "location": map
          })
        gc.getLocation(point, function(rs) {
          var addComp = rs.addressComponents;
        });
        let myValue
        ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
          let _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          this.address_detail = myValue
          this.baidu = myValue
          console.log(this.address_detail)
          setPlace();
        });

        function setPlace() {
          map.clearOverlays(); //清除地图上所有覆盖物
          function myFun() {
            th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(th.userlocation, 18);
            map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
          }

          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);
          //
          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click", function(e) {
            //经度
            console.log(th.userlocation.lng);
            //维度
            console.log(th.userlocation.lat);

          })
        }

      })
    },
    methods: {
      haha(address_detail) {
        setTimeout(() => {
          console.log(this)
          //                  console.log($('#suggestId').val())
          var baiduapi = encodeURI($('#suggestId').val());
          console.log(baiduapi)

          var jd = this.userlocation.lng
          var wd = this.userlocation.lat
          this.$router.push({
            path: "/new_address",
            query: {
              baiduapi,
              jd,
              wd,
              username:this.$route.query.username,
              phone:this.$route.query.phone,
              detailAddr:this.$route.query.detailAddr,
              about_coach:this.$route.query.about_coach,
              coachid:this.$route.query.coachid
            }
          })
        }, 1000)

      }

    }
  }
</script>

<style scoped>
  @import "../../assets/css/search_address.css";
</style>
